<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="550"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function for drawing arrow heads
    function drawArrowhead(ctx, x, y, angle) {
        const headlen = 10;
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle - Math.PI / 6), y - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle + Math.PI / 6), y - headlen * Math.sin(angle + Math.PI / 6));
    }

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Define geometry
    const c1 = { x: 200, y: 150 };
    const r1 = 80;
    const r2 = 50;
    const c2 = { x: c1.x + r1 - r2, y: 400 };

    // Thread x-coordinates
    const thread_x_right = c1.x + r1;
    const thread_x_left = c2.x - r2;

    // --- Drawing ---

    // Disc 1 (Top)
    ctx.beginPath();
    ctx.arc(c1.x, c1.y, r1, 0, 2 * Math.PI);
    ctx.stroke();

    // Center M1
    ctx.beginPath();
    ctx.arc(c1.x, c1.y, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("M", c1.x - 10, c1.y + 5);
    ctx.font = 'italic 15px Times New Roman';
    ctx.fillText("1", c1.x, c1.y + 10);
    ctx.font = 'italic 20px Times New Roman';

    // Radius R1
    ctx.beginPath();
    ctx.moveTo(c1.x, c1.y);
    const r1_angle = Math.PI * 3 / 4;
    ctx.lineTo(c1.x + r1 * Math.cos(r1_angle), c1.y + r1 * Math.sin(r1_angle));
    ctx.stroke();
    ctx.fillText("R", c1.x - 30, c1.y - 30);
    ctx.font = 'italic 15px Times New Roman';
    ctx.fillText("1", c1.x - 19, c1.y - 25);
    ctx.font = 'italic 20px Times New Roman';

    // Disc 2 (Bottom)
    ctx.beginPath();
    ctx.arc(c2.x, c2.y, r2, 0, 2 * Math.PI);
    ctx.stroke();

    // Center M2
    ctx.beginPath();
    ctx.arc(c2.x, c2.y, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("M", c2.x - 10, c2.y + 5);
    ctx.font = 'italic 15px Times New Roman';
    ctx.fillText("2", c2.x, c2.y + 10);
    ctx.font = 'italic 20px Times New Roman';

    // Radius R2
    ctx.beginPath();
    ctx.moveTo(c2.x, c2.y);
    const r2_angle = Math.PI * 3 / 4;
    ctx.lineTo(c2.x + r2 * Math.cos(r2_angle), c2.y + r2 * Math.sin(r2_angle));
    ctx.stroke();
    ctx.fillText("R", c2.x - 25, c2.y - 18);
    ctx.font = 'italic 15px Times New Roman';
    ctx.fillText("2", c2.x - 14, c2.y - 13);
    ctx.font = 'italic 20px Times New Roman';

    // Thread
    ctx.beginPath();
    ctx.moveTo(thread_x_right, c1.y);
    ctx.lineTo(thread_x_right, c2.y);
    ctx.arc(c2.x, c2.y, r2, 0, Math.PI, false);
    ctx.lineTo(thread_x_left, c1.y);
    ctx.stroke();
    
    // Force F arrows
    const f_y_pos = 300;
    const f_arrow_length = 30;
    // Downward F
    ctx.beginPath();
    ctx.moveTo(thread_x_right, f_y_pos - f_arrow_length/2);
    ctx.lineTo(thread_x_right, f_y_pos + f_arrow_length/2);
    drawArrowhead(ctx, thread_x_right, f_y_pos + f_arrow_length/2, Math.PI/2);
    ctx.stroke();
    ctx.fillText("F", thread_x_right - 20, f_y_pos);

    // Upward F
    ctx.beginPath();
    ctx.moveTo(thread_x_left, f_y_pos + f_arrow_length/2);
    ctx.lineTo(thread_x_left, f_y_pos - f_arrow_length/2);
    drawArrowhead(ctx, thread_x_left, f_y_pos - f_arrow_length/2, -Math.PI/2);
    ctx.stroke();
    ctx.fillText("F", thread_x_left + 20, f_y_pos);
    
    // Rotation Arrows
    // theta_dot_1
    const rot_r1 = r1 + 15;
    const rot_start_angle1 = -Math.PI / 3.5;
    const rot_end_angle1 = Math.PI / 3.5;
    ctx.beginPath();
    ctx.arc(c1.x, c1.y, rot_r1, rot_start_angle1, rot_end_angle1);
    const arrow_pt1 = { x: c1.x + rot_r1 * Math.cos(rot_end_angle1), y: c1.y + rot_r1 * Math.sin(rot_end_angle1) };
    drawArrowhead(ctx, arrow_pt1.x, arrow_pt1.y, rot_end_angle1 + Math.PI/2);
    ctx.stroke();
    ctx.fillText("θ", arrow_pt1.x + 15, arrow_pt1.y);
    ctx.beginPath(); // Dot over theta
    ctx.arc(arrow_pt1.x + 15, arrow_pt1.y - 10, 1.5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = 'italic 15px Times New Roman';
    ctx.fillText("1", arrow_pt1.x + 25, arrow_pt1.y + 5);
    ctx.font = 'italic 20px Times New Roman';

    // theta_dot_2
    const rot_r2 = r2 + 15;
    const rot_start_angle2 = -Math.PI / 3.5;
    const rot_end_angle2 = Math.PI / 3.5;
    ctx.beginPath();
    ctx.arc(c2.x, c2.y, rot_r2, rot_start_angle2, rot_end_angle2);
    const arrow_pt2 = { x: c2.x + rot_r2 * Math.cos(rot_end_angle2), y: c2.y + rot_r2 * Math.sin(rot_end_angle2) };
    drawArrowhead(ctx, arrow_pt2.x, arrow_pt2.y, rot_end_angle2 + Math.PI/2);
    ctx.stroke();
    ctx.fillText("θ", arrow_pt2.x + 18, arrow_pt2.y);
    ctx.beginPath(); // Dot over theta
    ctx.arc(arrow_pt2.x + 18, arrow_pt2.y - 10, 1.5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = 'italic 15px Times New Roman';
    ctx.fillText("2", arrow_pt2.x + 28, arrow_pt2.y + 5);
    ctx.font = 'italic 20px Times New Roman';

    // Dimension x
    const x_line_x = 80;
    const y_top = c1.y;
    const y_bottom = c2.y - r2 - 20;
    // Top T-bar and line
    ctx.beginPath();
    ctx.moveTo(x_line_x - 40, y_top);
    ctx.lineTo(x_line_x + 10, y_top);
    ctx.stroke();
    // Vertical line
    ctx.beginPath();
    ctx.moveTo(x_line_x, y_top);
    ctx.lineTo(x_line_x, y_bottom);
    ctx.stroke();
    // Bottom T-bar
    ctx.beginPath();
    ctx.moveTo(x_line_x - 10, y_bottom);
    ctx.lineTo(x_line_x + 10, y_bottom);
    ctx.stroke();
    // Dashed horizontal line
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(x_line_x + 10, y_bottom);
    ctx.lineTo(c2.x + r2 + 50, y_bottom);
    ctx.stroke();
    ctx.setLineDash([]);
    // Label x
    ctx.fillText("x", x_line_x - 20, (y_top + y_bottom) / 2);

    // Figure Label
    ctx.fillText("Fig. 1.158.", 225, 520);

</script>
</body>
</html>